<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <meta name="robots" content="all,follow" />
    <meta name="author" lang="en" content="All: ... [www.url.com]; e-mail: info@url.com" />
    <meta name="copyright" lang="en" content="Webdesign: Nuvio [www.nuvio.cz]; e-mail: ahoj@nuvio.cz" />
    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
    <!--[if lte IE 6]><link rel="stylesheet" media="screen,projection" type="text/css" href="css/main-ie6.css" /><![endif]-->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>
    <title>gr8!</title>
</head>

<body>

<div id="main">

    <!-- Header -->
    <div id="header" class="box">

        <div id="logo"><p><a href="./" title="Your Company [Go to homepage]"><span></span>Your Company</a></p></div>

        <hr class="noscreen" />

        <!-- Navigation -->
        <ul id="nav">
            <li class="active"><a href="#"><span>Home</span></a></li> <!-- Active (.active) -->
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Products</span></a></li>
            <li><a href="#"><span>Pricing</span></a></li>
            <li><a href="#"><span>Purchase</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>

    </div> <!-- /header -->

    <hr class="noscreen" />

    <!-- Box 01 -->
    <div class="box-01">

        <!-- Slogan (design/hx-slogan.gif) -->
        <div id="slogan"><h1><span></span>Say Hello.<br />New version is available.</h1></div>

        <hr class="noscreen" />

        <!-- Ribbon (design/box-01-ribbon.gif) -->
        <div id="ribbon"><h4 class="hidden">Price: $5,95</h4></div>

        <!-- Button ("Purchase") -->
        <p id="button"><a href="#"><img src="design/box-01-button.gif" alt="" /></a></p>

        <hr class="noscreen" />

        <!-- News -->
        <div id="news"><strong>What´s New:</strong> <a href="#">Version 1.5 is available for download on AppStore for $5,95</a></div>

        <!-- Twitter -->
        <div id="twitter"><a href="#">Follow us on Twitter</a></div>

    </div> <!-- /box-01 -->

    <hr class="noscreen" />

    <!-- Box 02 -->
    <div class="box-02-top"></div>
    <div class="box-02 box">

        <!-- Left column -->
        <div class="col left">

            <div class="in">
            
                <h2>Product Features</h2>
                <p><strong>Lorem ipsum dolor sit amet consectetur elite.</strong> Nulla adipising telus non massa vestibulum est ultrices ege ta este commodo cons.</p>
                
            </div> <!-- /in -->

            <p class="nom"><a href="#"><img src="design/btn-more.gif" alt="More" /></a></p>

        </div> <!-- /col -->

        <!-- Center column -->
        <div class="col center">

            <div class="in">
            
                <h2>Preview</h2>
                <p><strong>Lorem ipsum dolor sit amet consectetur elite.</strong> Nulla adipising telus non massa vestibulum es ultrices ege ta este commodo cons.</p>
                
            </div> <!-- /in -->

            <p class="nom"><a href="#"><img src="design/btn-more.gif" alt="More" /></a></p>

        </div> <!-- /col -->

        <!-- Right column -->
        <div class="col right">

            <div class="in">
                <h2>What´s New</h2>
                <ul class="ul-news">
                    <li><strong>15|08</strong> <a href="#"> Lorem ipsum dolor sit consectetur</a></li>
                    <li><strong>15|08</strong> <a href="#"> Lorem ipsum dolor sit consectetur</a></li>
                    <li><strong>15|08</strong> <a href="#"> Lorem ipsum dolor sit consectetur</a></li>
                    <li><strong>15|08</strong> <a href="#"> Lorem ipsum dolor sit consectetur</a></li>
                    <li><strong>15|08</strong> <a href="#"> Lorem ipsum dolor sit consectetur</a></li>
                </ul>
            </div> <!-- /in -->

            <p class="nom"><a href="#"><img src="design/btn-more.gif" alt="More" /></a></p>

        </div> <!-- /col -->

    </div> <!-- /box-02 -->
    <div class="box-02-bottom"></div>

    <hr class="noscreen" />

    <!-- Box 03 -->
    <div class="box-03-top"></div>
    <div class="box-03 box">

        <!-- Slider -->
        <div id="loopedSlider" class="box">
            <div class="container">
                <div class="slides">
                
                    <!-- first 5 items -->
                    <div>
                        <ul class="list box">
                            <li><a href="#"><img src="design/slider-1.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-2.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-3.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-4.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-5.jpg" alt="" /></a></li>
                        </ul>
                    </div>
                    
                    <!-- next 5 items -->
                    <div>
                        <ul class="list box">
                            <li><a href="#"><img src="design/slider-6.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-7.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-8.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-9.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-10.jpg" alt="" /></a></li>
                        </ul>
                    </div>
                    
                    <!-- and next 5 items -->
                    <div>
                        <ul class="list box">
                            <li><a href="#"><img src="design/slider-11.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-12.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-13.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-14.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="design/slider-15.jpg" alt="" /></a></li>
                        </ul>
                    </div>
                    
                </div> <!-- /slides -->
            </div> <!-- /container -->

            <!-- Arrows (left, right) -->
            <a href="#" class="previous"><img src="design/arrow-left.gif" alt="&laquo;" /></a>
            <a href="#" class="next"><img src="design/arrow-right.gif" alt="&laquo;" /></a>

            <!-- Pagination -->
            <ul class="pagination">
                <li><a href="#"><span>1</span></a></li>
                <li><a href="#"><span>2</span></a></li>
                <li><a href="#"><span>3</span></a></li>
            </ul>
        </div> <!-- /looperslider -->

        <script type="text/javascript" charset="utf-8">
        $(function(){
        $('#loopedSlider').loopedSlider();
        });
        </script>

    </div> <!-- /box-03 -->
    <div class="box-03-bottom"></div>

    <hr class="noscreen" />

    <!-- Box 04 -->
    <div class="box-04 box">

        <div class="box-04-title"><h3><span>Check also these great products&hellip;</span></h3></div>
        
        <p class="box-04-links">
            <a href="#">Lorem ipsum</a> <span>|</span>
            <a href="#">Lorem ipsum</a> <span>|</span>
            <a href="#">Lorem ipsum</a> <span>|</span>
            <a href="#">Lorem ipsum</a> <span>|</span>
            <a href="#">Lorem ipsum</a>
        </p>

    </div> <!-- /box-04 -->

    <hr class="noscreen" />

    <!-- Footer -->
    <div id="footer" class="box">

        <p class="f-right"><a href="#" class="footer-rss">RSS Feed</a></p>

        <p class="f-left">
            <strong>&copy;&nbsp;2009 <a href="#">YOURcompany</a></strong><br />
            <!-- PLEASE DON´T REMOVE THIS LINE (OR VISIT http://nuviotemplates.com/terms.php) -->
            <span class="smaller"><a href="http://www.nuviotemplates.com/">Free web templates</a> sponsored by <a href="http://www.adminizio.com/">Admin Templates</a></span>
            <!-- PLEASE DON´T REMOVE THIS LINE (OR VISIT http://nuviotemplates.com/terms.php) -->
        </p>

    </div> <!-- /footer -->

</div> <!-- /main -->

</body>
</html>